<template>
        <div class="contractEnd">
                <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline">
                        <el-form-item label="合同名称：">
                                <el-input v-model="params.contractName" placeholder="请输入合同名称"></el-input>
                        </el-form-item>
                        <el-form-item label="审批状态：">
                                <el-select v-model="params.status">
                                        <el-option v-for="item in contractStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="经办人名称：">
                                <el-input v-model="params.contractOperatorName" placeholder="请输入经办人名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                                <el-button type="primary" @click="reset">重置</el-button>
                                <el-button type="default" @click="creacteNew">新建终止</el-button>
                                <el-button type="default" @click="isMoreSelect">{{selectMore ? "收起筛选项" : "更多筛选项"}}</el-button>
                        </el-form-item>
                        <div v-if="selectMore">
                                <el-form-item label="合同编号：">
                                        <el-input v-model="params.contractCode" placeholder="请输入合同编号"></el-input>
                                </el-form-item>
                                <el-form-item label="收支类别：">
                                        <el-select v-model="params.budgetType"  style="width:150px">
                                                <el-option v-for="item in budgetTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                </el-form-item>
                                <el-form-item label="合同类型：" >
                                        <el-select v-model="params.contractType" style="width:150px">
                                                <el-option v-for="item in contractTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
                                        </el-select>
                                </el-form-item>
                                <el-form-item label="合同性质：" >
                                        <el-select v-model="params.contractNature" style="width:150px">
                                                <el-option v-for="item in contractNatrues" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                </el-form-item>
                                <el-form-item label="终止主体名称：">
                                        <el-input v-model="params.subjectName" placeholder="请输入终止主体名称"></el-input>
                                </el-form-item>
                                <el-form-item label="终止主体类型：" >
                                        <el-select v-model="params.subjectType" style="width:150px">
                                                <el-option v-for="item in subjectTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                </el-form-item>
                        </div>
                </el-form>
                <el-table :data="tableData" v-loading="loading" border stripe>
                        <el-table-column label="合同名称" align="center" prop="contractName" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="合同编号" prop="contractCode" align="center" :show-overflow-tooltip="true"></el-table-column>
                         <el-table-column label="合同状态" prop="contractStatus" align="center" :formatter="initcontractStatus"></el-table-column>
                         <el-table-column label="审批状态" prop="status" align="center" :formatter="initstatus"></el-table-column>
                        <el-table-column label="收支类别" prop="budgetType" align="center" :formatter="initbudgetType"></el-table-column>
                        <el-table-column label="合同类型" prop="contractTypeName" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="合同性质" prop="contractNature" align="center" :formatter="initcontractNature"></el-table-column>
                        <el-table-column label="经办人姓名" prop="contractOperatorName" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="合同终止原因" prop="reason" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="终止主体名称" prop="subjectName" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="终止主体类型" prop="subjectType" align="center" :formatter="initsubjectType"></el-table-column>
                        <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
                        <el-table-column label="更新人" prop="updateUserName" align="center"></el-table-column>
                        <el-table-column label="更新时间" prop="updateTime" align="center" :formatter="initTime" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="操作"  align="center" fixed="right" width="200">
                                <template slot-scope="scope">
                                        <el-button type="text" size="small" :disabled="scope.row.status !=0 && scope.row.status !=3" @click="editend(scope.row.id)">编辑</el-button>
                                       <el-button type="text" size="small" :disabled="scope.row.status !=0 && scope.row.status !=3" @click="faqishenpi(scope.row)">发起审批</el-button>
                                       <el-button type="text" size="small" @click="lookend(scope.row.id)">详情</el-button>
                                       <el-button type="text" size="small" @click="deleteend(scope.row)" :disabled="scope.row.status !=0 && scope.row.status !=3">删除</el-button>
                                </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="params.pageNum"
                            :page-sizes="[10, 20, 40, 50]"
                            :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total" style="margin-top:30px;">
                 </el-pagination>
        </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
        name: 'contractend',
        title: '合同终止',
        data(){
                return {
                        time:"",
                        contractStatus:[
                                {label:"全部",value:""},{label:"未审批",value:0},{label:"审批中",value:1},{label:"审批通过",value:2},{label:"审批拒绝",value:3}
                        ],
                        budgetTypes:[
                                {label:"全部",value:""},{label:"收款类",value:0},{label:"支出类",value:1}
                        ],
                        contractTypes:[
                                {label:"全部",value:""},{label:"开发商类",value:0},{label:"渠道商类",value:1}
                        ],
                        contractNatrues:[
                                {label:"全部",value:""},{label:"框架合同",value:0},{label:"主合同",value:1},{label:"分合同",value:2}
                        ],
                        subjectTypes:[
                                 {label:"全部",value:""},{label:"付款方",value:1},{label:"收款方",value:2},{label:"丙方",value:3}
                        ],
                        selectMore:false,
                        loading:false,
                        id:"",//作废id
                        params:{
                                contractName:"",//合同名称
                                contractCode:"",//合同编号
                                status:"",//合同状态
                                contractOperatorName:"",//经办人
                                budgetType:"",//收支类别
                                contractType:"",//合同类型
                                contractNature:"",//合同性质
                                subjectType:"",//终止主体类型
                                subjectName:"",//终止主体名称
                                pageNum:1,
                                pageSize:10
                        },
                        total:0,
                        dialogVisible:false,
                        textvoid:"",//作废内容
                        tableData:[]
                }
        },
        methods:{
                loadType(){
                        this.axios.post(api.CONTRACTENDTYPE,{}).then((res)=>{
                                if(res.data.code==200){
                                        this.contractTypes=res.data.data;
                                        this.contractTypes.unshift({code:"",name:"全部"});
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadData(){
                        this.axios.post(api.CONTRACTENDLIST,this.params).then((res)=>{
                                if(res.data.code==200){
                                        this.tableData=res.data.data.list;
                                        this.total=res.data.data.total;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                query(){
                        this.params.pageNum=1;
                        this.params.pageSize=10;
                        this.loadData();
                },
                reset(){
                        this.params.contractName="";
                        this.params.status="";
                        this.params.contractOperatorName="";
                        this.params.budgetType="";
                        this.params.contractCode="";
                        this.params.contractType="";
                        this.params.contractNature="";
                        this.params.subjectType="";
                        this.params.subjectName="";
                },
                handleSizeChange(val){
                        this.params.pageSize = val;
                        this.loadData();
                },
                handleCurrentChange(val){
                        this.params.pageNum = val;
                        this.loadData();
                },
                isMoreSelect(){
                        this.selectMore=!this.selectMore
                },
                initcontractStatus(row, column, cellValue, index){
                        if(cellValue==0){return "未审批"}
                        if(cellValue==1){return "审批中"}
                        if(cellValue==2){return "会签中"}
                        if(cellValue==3){return "会签通过"}
                        if(cellValue==4){return "会签不通过"}
                        if(cellValue==5){return "终止中"}
                        if(cellValue==6){return "已终止"}
                        if(cellValue==7){return "变更中"}
                        if(cellValue==8){return "已变更"}
                        if(cellValue==9){return "已作废"}
                        if(cellValue==10){return "已发布"}
                        if(cellValue==11){return "已删除"}
                },
                initstatus(row, column, cellValue, index){
                        if(cellValue==0){return "未审批"}
                        if(cellValue==1){return "审批中"}
                        if(cellValue==2){return "审批通过"}
                        if(cellValue==3){return "审批拒绝"}
                        if(cellValue==4){return "删除"}
                },
                initbudgetType(row, column, cellValue, index){
                        if(cellValue==0){return "收款类"}
                        if(cellValue==1){return "支出类"}
                },
                initcontractNature(row, column, cellValue, index){
                        if(cellValue==0){return "框架合同"}
                        if(cellValue==1){return "主合同"}
                        if(cellValue==2){return "分合同"}
                },
                initsubjectType(row, column, cellValue, index){
                        if(cellValue==1){return "付款方"}
                        if(cellValue==2){return "收款方"}
                        if(cellValue==3){return "丙方"}
                },
                getTimeString (timestamp) {
                        if (timestamp) {
                                const time = new Date(timestamp)
                                let dateStr = ''
                                const year = time.getFullYear()
                                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                                const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                                dateStr = year + '-' + month + '-' + day
                                let timeStr = ''
                                const hours = time.getHours()
                                const hh = String(hours).length === 1 ? '0' + hours : hours
                                const minutes = time.getMinutes()
                                const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                                const seconds = time.getSeconds()
                                const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                                timeStr = `${hh}:${mm}:${ss}`
                                // timeStr = `${hh}:${mm}`
                                return dateStr + ' ' + timeStr
                                // return dateStr
                        } else {
                                return ''
                        }
                },
                initTime(row, column, cellValue, index){
                        return this.getTimeString(cellValue)
                },
                lookend(id){
                        this.$router.push({
                                path:"/addcontractend",
                                query:{
                                        endId:id,
                                        type:"look"
                                }
                        })
                },
                editend(id){
                        this.$router.push({
                                path:"/addcontractend",
                                query:{
                                        endId:id,
                                        type:"edit"
                                }
                        })
                },
                faqishenpi(data){
                        let params={};
                        params.id=data.id;
                        params.contractCode=data.contractCode;
                        params.subjectType=data.subjectType;
                        params.subjectName=data.subjectName;
                        params.reason=data.reason;
                        this.axios.post(api.CONTRACTENDAPPROVAL,params).then((res)=>{
                            if(res.data.code==200){
                                this.$alert("操作成功", '提示', {
                                        type: 'success ',
                                        confirmButtonText: '确定',
                                        callback: action => {
                                                this.loadData();
                                        }
                                });
                            }
                        }).catch((error)=>{
                            console.log(error)
                        })
                },
                deleteend(data){
                        this.$confirm("此操作将删除该条记录, 是否继续?","提示",{
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                        }).then(()=>{
                                let {id,contractCode} = data;
                                let params = {
                                        id:id,
                                        contractCode:contractCode,
                                }
                                this.axios.post(api.DELETECONTRACTEND,params).then((res)=>{
                                        if(res.data.code==200){
                                                this.$alert("操作成功", '提示', {
                                                        type: 'success ',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                                this.loadData();
                                                        }
                                                });
                                        }
                                })
                        }).catch(()=>{})
                },
                creacteNew(){
                        this.$router.push({
                                path:"/addcontractend"
                        })
                }
        },
        mounted(){
                this.loadType();
                this.loadData();
        }
}
</script>

<style lang="stylus">
        .contractEnd {
                .el-table .cell {
                        white-space: nowrap !important;
                        .name-wrapper {
                                overflow: hidden;
                                text-overflow: ellipsis;
                        }
                }
                .btns {
                        text-align: center;
                        margin-top: 30px;
                }
        }

</style>
